import React, { Fragment } from "react";
import { Modal } from "antd";

export default function CreateAndUpdate(props) {
  const { visible, changeModalState, dialogTitle } = props;
  const [confirmLoading, setConfirmLoading] = React.useState(false);
  const [modalText, setModalText] = React.useState("Content of the modal");

  const handleOk = () => {
    setModalText("The modal will be closed after two seconds");
    setConfirmLoading(true);
    setTimeout(() => {
      changeModalState(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    console.log("Clicked cancel button");
    changeModalState(false);
  };

  return (
    <Fragment>
      <Modal
        title={`${dialogTitle}角色`}
        visible={visible}
        okText="提交"
        onOk={handleOk}
        confirmLoading={confirmLoading}
        cancelText="取消"
        onCancel={handleCancel}
      >
        <p>{modalText}</p>
      </Modal>
    </Fragment>
  );
}
